<template>
    <div class="charger-management">
      <h2>充电桩管理系统</h2>
      
      <!-- 添加充电桩 -->
      <div class="add-charger">
        <input v-model="newCharger.name" placeholder="充电桩名称" />
        <input v-model="newCharger.location" placeholder="充电桩位置" />
        <select v-model="newCharger.status">
          <option value="空闲">空闲</option>
          <option value="使用中">使用中</option>
          <option value="故障">故障</option>
        </select>
        <button @click="addCharger">添加充电桩</button>
      </div>
  
      <!-- 充电桩列表 -->
      <div class="charger-list">
        <table>
          <thead>
            <tr>
              <th>充电桩ID</th>
              <th>名称</th>
              <th>位置</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(charger, index) in chargers" :key="index">
              <td>{{ charger.id }}</td>
              <td>{{ charger.name }}</td>
              <td>{{ charger.location }}</td>
              <td :class="`status-${charger.status}`">{{ charger.status }}</td>
              <td>
                <button @click="deleteCharger(index)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  
  export default defineComponent({
    name: 'ChargerManagement',
    setup() {
      // 定义充电桩的类型
      interface Charger {
        id: number;
        name: string;
        location: string;
        status: string;
      }
  
      // 定义充电桩列表
      const chargers = ref<Charger[]>([
        {
          id: 1,
          name: '充电桩A',
          location: '东123',
          status: '空闲',
        },
        {
          id: 2,
          name: '充电桩B',
          location: '停车场2',
          status: '使用中',
        },
        {
          id: 3,
          name: '充电桩C',
          location: '停车场3',
          status: '故障',
        },
        {
          id: 4,
          name: '充电桩D',
          location: '停车场4',
          status: '空闲',
        },
        {
          id: 5,
          name: '充电桩E',
          location: '停车场5',
          status: '使用中',
        },
      ]);
  
      // 定义新充电桩的信息
      const newCharger = ref<Partial<Charger>>({
        name: '',
        location: '',
        status: '空闲',
      });
  
      // 添加充电桩
      const addCharger = () => {
        if (newCharger.value.name.trim() && newCharger.value.location.trim()) {
          const newId = chargers.value.length > 0 ? chargers.value[chargers.value.length - 1].id + 1 : 1;
          chargers.value.push({
            id: newId,
            name: newCharger.value.name,
            location: newCharger.value.location,
            status: newCharger.value.status,
          });
          newCharger.value = {
            name: '',
            location: '',
            status: '空闲',
          };
        } else {
          alert('请输入完整的充电桩信息！');
        }
      };
  
      // 删除充电桩
      const deleteCharger = (index: number) => {
        chargers.value.splice(index, 1);
      };
  
      return {
        chargers,
        newCharger,
        addCharger,
        deleteCharger,
      };
    },
  });
  </script>
  
  <style scoped>
  .charger-management {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  
  .add-charger {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .add-charger input,
  .add-charger select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  
  .add-charger button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .add-charger button:hover {
    background-color: #45a049;
  }
  
  .charger-list table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .charger-list table th,
  .charger-list table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .charger-list table th {
    background-color: #f2f2f2;
  }
  
  .charger-list table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .charger-list table .status-空闲 {
    color: #4CAF50;
  }
  
  .charger-list table .status-使用中 {
    color: #FF9800;
  }
  
  .charger-list table .status-故障 {
    color: #FF5252;
  }
  
  .charger-list table td button {
    padding: 5px 10px;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .charger-list table td button:hover {
    background-color: #cc0000;
  }
  </style>